<template>
  <view class="wrapper row">
    <view class="top">
      <view class="bg"></view>
      <view class="detail u-padding-30">
        <view style="background: #fff;border-radius: 8px;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);" class="u-padding-30">
          <view class="u-p-l-40">
            <u-form :model="form" ref="uForm" label-width="100" :label-style="label_style">
              <u-form-item label="姓名：" :border-bottom="false">
                <u-input v-model="form.userName" placeholder="请输入您的姓名"/>
              </u-form-item>
              <u-form-item label="电话：" :border-bottom="false">
                <u-input v-model="form.userPhone" placeholder="请输入您的电话" type="number"/>
              </u-form-item>
            </u-form>
          </view>
          <u-button type="primary" :custom-style="customStyle" @click="save">提交</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {TOAST} from "../../../util/util";
  import {request} from "../../../util/api";

  export default {
    name: "",

    data() {
      return {
        customStyle: {
          background: '#7EAB41',
          boxShadow: '0px 2px 3px 0px rgba(0, 0, 0, 0.4)',
          padding: '0 30rpx',
          marginTop: '40px'
        },
        form: {
          userPhone: '',
          userName: ''
        },
        label_style: {
          fontWeight: 'bold'
        },
        id: ''
      }
    },

    onLoad(option) {
      this.id = option.id
      let info = uni.getStorageSync('zbz_user')
      this.form.userPhone = info.mobile
    },

    methods: {
      save() {
        if (!this.form.userName) {
          TOAST('请输入姓名！')
          return
        }
        if (!this.form.userPhone) {
          TOAST('请输入电话号码！')
          return
        }
        request({
          url: '/system/add/userRelation',
          method: 'post',
          data: {
            actId: this.id,
            userPhone: this.form.userPhone,
            userName: this.form.userName
          }
        }).then(res => {
          uni.showModal({
            title: '提示',
            content: '报名成功',
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    flex-direction: column;
    height: 100%;
    .top {
      position: relative;
      .bg {
        background: linear-gradient(#7EAB41, #E4EFDD);
        height: 280upx;
        border-radius: 0 0 100upx 100upx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
      }
    }
  }
</style>
